<template>
  <div id="discuss">
    <div class="input-comment">
      <a-input
        type="textarea"
        allow-clear
        placeholder="发布一条评论吧~"
        :auto-size="{ minRows: 3, maxRows: 6 }"
        :maxLength="commentList"
        :value="comment"
        @change="onChange"
      />
      <!-- 输入框限制长度 -->
      <div class="c-list">
        {{ commentList }}
      </div>
    </div>
    <div class="btn-list mtop-10">
      <!-- 左侧操作栏 -->
      <div class="operations">
        <span @click="atClick" class="mright-10 font-18 pointer">@</span>
        <span @click="wellClick" class="font-18 pointer">#</span>
      </div>
      <!-- 右侧发布评论按钮 -->
      <div class="release">
        <a-button class="br-30">发布</a-button>
      </div>
    </div>
    <div class="comment-list" v-if="!isEmpty">
      <!-- 精彩评论 -->
      <div class="hot" v-show="hotComments && hotComments.length">
        <div class="font-16 font-weight">精彩评论</div>
        <Comments
          ref="hot"
          v-for="item in hotComments"
          :key="item.commentId"
          :commentTime="item.timeStr"
          :likedCount="item.likedCount"
          :replayText="item.content"
          :liked="item.liked"
          @giveLike="value => changeLiked(value, item.commentId)"
          @goDetail="goDetail"
        >
          <template #avatar>
            <img
              class="img-percent pointer"
              v-lazy="item.user.avatarUrl"
              :data-id="item.user.userId"
            >
          </template>
          <!-- 回复人名称 -->
          <template #replay>
            <span
              class="font-12 pointer"
              style="color: rgb(80, 125, 175);"
              :data-id="item.user.userId"
            >
              {{ item.user.nickname }}：
            </span>
          </template>
          <template #releasename>
            <span
              v-if="isReplied(item.beReplied)"
              class="font-12 pointer mleft-10"
              style="color: rgb(80, 125, 175);"
              :data-id="item.beReplied[0].user.userId"
            >
              {{ item.beReplied[0].user.nickname }}：
            </span>
          </template>
          <template #releasecontent>
            <span
              v-if="isReplied(item.beReplied)"
              class="font-12 pointer mleft-10"
            >
              {{ item.beReplied[0].content }}
            </span>
          </template>
        </Comments>
        <div class="more-comment ">
          <a-button v-show="showHot" @click="showMore" class="br-30 moreBtn">
            更多精彩评论
            <a-icon type="right" />
          </a-button>
        </div>
      </div>
      <!-- 最新评论 -->
      <div class="new" v-show="newComments && newComments.length">
        <div class="font-16 font-weight">{{ `最新评论(${newTotal})` }}</div>
        <Comments
          v-for="item in newComments"
          :key="item.commentId"
          :commentTime="item.timeStr"
          :likedCount="item.likedCount"
          :replayText="item.content"
          :liked="item.liked"
          @giveLike="value => changeLiked(value, item.commentId)"
          @goDetail="goDetail"
        >
          <template #avatar>
            <img
              class="img-percent pointer"
              v-lazy="item.user.avatarUrl"
              :data-id="item.user.userId"
            >
          </template>
          <!-- 回复人名称 -->
          <template #replay>
            <span
              class="font-12 pointer"
              style="color: rgb(80, 125, 175);"
              :data-id="item.user.userId"
            >
              {{ item.user.nickname }}：
            </span>
          </template>
          <template #releasename>
            <span
              v-if="isReplied(item.beReplied)"
              class="font-12 pointer mleft-10"
              style="color: rgb(80, 125, 175);"
              :data-id="item.beReplied[0].user.userId"
            >
              <!-- {{ isReplied(item.beReplied) ? isReplied(item.beReplied).user.nickname : '' }}： -->
              {{ item.beReplied[0].user.nickname }}：
            </span>
          </template>
          <template #releasecontent>
            <span
              v-if="isReplied(item.beReplied)"
              class="font-12 pointer mleft-10"
            >
              <!-- {{ isReplied(item.beReplied) ? isReplied(item.beReplied).content : '' }} -->
              {{ item.beReplied[0].content }}
            </span>
          </template>
        </Comments>
        <div class="more-comment">
          <a-pagination
            :current="current"
            :total="newTotal"
            :defaultPageSize="20"
            @change="onChangePage"
          />
        </div>
        
      </div>
    </div>
    <Empty description="暂无评论,抢个沙发吧~" v-else />
  </div>
</template>

<script>
import { Input, Pagination } from 'ant-design-vue';
import { hotComments } from '@/api/detail';
import { commentLike } from '@/api';
import Empty from '@/components/Library/Empty';
import Comments from '@/components/Detail/Comments';

export default {
  name: 'Discuss',

  components: {
    Empty,
    Comments,
    AInput: Input,
    APagination: Pagination,
  },

  props: {
    newComments: {
      type: Array,
      default() {
        return []
      }
    },
    newTotal: {
      type: Number,
      default: 0
    },
    /**
     * 0: 歌曲

      1: mv

      2: 歌单

      3: 专辑

      4: 电台

      5: 视频

      6: 动态
     */
    // resourceType: {
    //   type: Number,
    //   default: 2, // 默认为歌单类型
    //   require: true
    // },
    // // 资源id
    // resourceId: {
    //   type: [String, Number]
    // }
  },

  data() {
    return {
      comment: '',
      commentList: 150,
      params: {
        id: this.$route.query.id,
        type: 2,
        limit: 5, // 默认取五条精彩评论
        offset: 0,
        timestamp: new Date().getTime()
      },
      // 当前页码
      current: 1,
      // 精彩评论
      hotComments: [],
      // 显示隐藏更多精彩按钮
      showHot: true,
      clickNum: 1
    }
  },

  computed: {
    isEmpty() {
      return !this.hotComments.length && !this.newComments.length;
    },
    RouteId() {
      const query = this.$route.query;
      if (query.id) {
        return query.id;
      } else if (query.vid) {
        return query.vid;
      } else {
        return query.mid;
      }
    }
  },

  watch: {
    comment: {
      handler(value) {
        if (!value) {
          this.commentList = 150;
          return;
        }
        this.commentList = 150 - value.length;
      }
    },
    // params: {
    //   handler() {
    //     this.getHotComments();
    //   },
    //   immediate: true,
    //   // deep: true
    // }
    
  },

  methods: {
    onChange(e) {
      this.comment = e.target.value;
    },
    atClick() {
      this.comment += '@';
    },
    wellClick() {
      this.comment += '#输入想说的话题#';
    },
    // 获取精彩评论
    async getHotComments() {
      await hotComments(this.params).then(hot => {
        // 多一个clickNum判断，防止第一次进入弹框，用户体验不好
        if (!hot.data.hasMore) {
          this.showHot = false;
        }
        const newobj = {};
        this.hotComments = hot.data.hotComments.reduce((preVal, curVal) => {
          newobj[curVal.commentId] ? '' : newobj[curVal.commentId] = preVal.push(curVal); 
          return preVal;
        }, []);
        // this.hotComments.push(...hot.data.hotComments);
      })
    },
    // 加载更多精彩评论
    showMore() {
      const n = this.clickNum++;
      this.params.offset = n * this.params.limit;
      this.getHotComments();
    },
    onChangePage(current) {
      // const news = this.newComments;
      // this.paramsA.offset = (current - 1) * this.paramsA.limit;
      // this.paramsA.before = news[news.length - 1].time;
      this.current = current;
      this.$emit('scrollTo', current);
    },
    // 点赞或取消点赞评论
    async changeLiked(isliked, cid) {
      const params = {
        cid,
        id: this.params.id, // 资源id
        t: isliked ? 1 : 0,
        type: this.params.type
      }
      const res = (await commentLike(params)).data;
      if (res.code === 200 && isliked) {
        this.$message.success('点赞成功');
      }
    },
    // 判断是否有评论人
    isReplied(value) {
      if (value && value.length) {
        return value[0];
      }
      return false;
    },
    // 跳转用户详情页
    goDetail(event) {
      if (!event.id) return;
      this.$router.push({
        name: 'userdetail',
        query: {
          id: event.id
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.input-comment {
  position: relative;
  .c-list {
    position: absolute;
    bottom: 0;
    right: 15px;
    color: #dfcfdf;
    font-weight: 700;
  }
}
.btn-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.more-comment {
  margin: 10px 0;
  text-align: center;
}
// .new {
//   position: relative;
//   ul.ant-pagination {
//     position: absolute;
//     left: 50%;
//     transform: translateX(-50%);
//   }
// }
/deep/textarea.ant-input {
  resize: none;
  box-shadow: 0 0 0 rgb(0 0 0 / 5%);
  overflow-y: auto !important;
  &:focus, &:hover {
    border-color: #d9d9d9;
  }
}
</style>